{% extends "base.html" %}
{% block title %}Home Page{% endblock %}
{% block css %}
    <style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;
     white-space: nowrap;
   }
 </style>
{% endblock %}
{% block js %}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript" src="/static/js/markerwithlabel.js"></script>
<script>
    window.onload = function() {
        var latLng = new google.maps.LatLng(30.107118, 30.783691);
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        i=0
        iw = new Array()
        {% for hotel in hotels %}
        var homeLatLng= new google.maps.LatLng({{ hotel.longitude }},{{ hotel.latitude }});
        var marker= new MarkerWithLabel({
            position: homeLatLng,
            draggable: false,
            raiseOnDrag: true,
            map: map,
            labelAnchor: new google.maps.Point(0, 0),
            labelClass: "labels" // the CSS class for the label
        });
        iw[{{ hotel.id }}] = new google.maps.InfoWindow({
            content: "{{ hotel.name }}<a href='/myhotel/hotel/{{ hotel.id }}/'> View More </a>"
        });
        google.maps.event.addListener(marker, "click", function(e) {
            iw[{{ hotel.id }}].open(map, this);
        });
        {% endfor %}
    };
</script>
{% endblock %}
{% block content %}
    <div class="row-fluid slideshow-row">
                <div class="span12 slideshow">
                        <div id="map" style="text-align:center;height: 400px; width: 100%;">
                        </div>
                </div>
            </div>
            <div class="row-fluid home">
                <div class="span12">
                    <h2>start <span>Booking your room</span><br /></h2>
                </div>
            </div>
{% endblock %}